<template>
  <div>
    <h1>采购入库</h1>
    <br>
    <!--下拉列表-->
    <!--placeholder 提示信息-->
    <el-select v-model="supplier" placeholder="请选择供应商">
      <el-option
          v-for="item in lessonArray"
          :key="item.supplierPkId"
          :label="item.supplierName"
          :value="item.supplierName">
      </el-option>
    </el-select>


    <span>采购人：</span>
    <span>{{ userName }}</span><br>
    <span>采购物品</span>
    <el-row>
      <el-table :data="goodsList" stripe>
        <el-table-column prop="commodityName" label="商品名称"></el-table-column>
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="purchasePrice" label="采购价">
          <template #default="scope">
            <el-input v-model="scope.row.purchasePrice" @change="changePurchasePrice(scope.row)"></el-input>
          </template>

        </el-table-column>
        <el-table-column prop="amount" label="采购数量">
          <template #default="scope">
            <el-input v-model="scope.row.amount" @change="change(scope.row)"></el-input>
          </template>

        </el-table-column>
        <el-table-column label="移除商品">
          <template #default="scope">
            <el-button type="primary" @click="removeItem(scope.row.shoppingTrolleyId)">移除商品</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <br>
    <el-button type="primary" @click="addSQE()">添加商品</el-button>

    <el-dialog v-model="add" title="添加" width="30%">
      <el-form :model="form" ref="form">
        <el-form-item label="商品编号">
          <el-input v-model="form.commoditySerialNumber" @change="queryInventory()"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="form.commodityName" :disabled="formlist"></el-input>
        </el-form-item>
        <el-form-item label="品牌">
          <el-input v-model="form.brand " :disabled="formlist"></el-input>
        </el-form-item>


        <el-form-item label="类别">
          <el-select v-model="form.category" placeholder="请选择类型" :disabled="formlist">
            <el-option value="电脑产品"></el-option>
            <el-option value="手机产品"></el-option>
            <el-option value="办公耗材"></el-option>
            <el-option value="电脑配件"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量">
          <el-input v-model="form.amount"></el-input>
        </el-form-item>

        <el-form-item label="照片">
          <!--          <el-input v-model="form.img" hidden="hidden"></el-input>-->
          <el-upload
              class="avatar-uploader"
              action="/api/file/facePic"
              name="headPic"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 50px;height: 50px"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
            <el-button slot="trigger"
                       size="small"
                       type="primary"
            >更换照片
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="addSupplier()">确定</el-button>

    </el-dialog>


    <el-button type="primary" @click="PutInStorage()">入库</el-button>
    <br><br>

    <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize"
                   background :total="total" @current-change="changeCurPage()"></el-pagination>
  </div>
</template>

<script>
import servicePath from "../serviceConfig";
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "PurchaseReceipt",
  created() {
    this.query();
    axios.post("/api/user/query", null).then(res => {
      this.userName = res.data

    })

    axios.post("/api/supplier/selectSupplierName", null).then(res => {

      this.lessonArray = res.data
    })


  },
  data() {
    return {
      curPage: 1,
      pageSize: 3,
      total: 0,
      goodsList: [],
      supplier: '',
      add: false,
      userName: '',
      formlist: false,

      lessonArray: [],


      form: {
        commoditySerialNumber: '',
        commodityName: '',
        brand: '',
        category: '',
        amount: '',
        purchasePrice:'',
        img: ''


      },
      forms:{},
      imageUrl: '',
      commodityName: '',


    }

  }, methods: {
    queryInventory() {
      let param = new URLSearchParams();
      param.append("commoditySerialNumber", this.form.commoditySerialNumber)
      axios.post("/api/CommodityRepertory/queryInventory", param).then(res => {
        if (res.data != null && "" != res.data) {

          this.form = res.data
          this.forms = res.data
          console.log(this.form)
          this.imageUrl=servicePath+res.data.img
          this.formlist = true

        } else {
          this.formlist = false
        }

      })


    }, change(scope) {
      axios.post("/api/shopping/update", scope).then(res => {

      })


    }, changePurchasePrice(scope) {
      axios.post("/api/shopping/update", scope).then(res => {

      })
    },

    addSQE() {
      this.add = true
    },
    removeItem(id) {
      let param = new URLSearchParams();
      param.append("id", id)

      axios.post("/api/shopping/deleteById", param).then(res => {
        this.query();
      })


    },
    addSupplier() {

      let param = {
        'supplierName': this.supplier,
        'commoditySerialNumber': this.form.commoditySerialNumber,
        'commodityName': this.form.commodityName,
        'brand': this.form.brand,
        'category': this.form.category,
        'amount': this.form.amount,
        'purchasePrice':this.forms.purchasePrice,
        'img': this.img,


      }

      if (this.imageUrl != null && "" != this.imageUrl) {
        axios.post("/api/shopping/add", param).then(res => {
          this.add = false
          this.formlist = false
          this.query();
          this.forms = {}
          this.form = {}

        })
      } else {
        ElMessage({
          message: '请选择照片',
          type: 'success'
        })
      }
      this.query();
      this.forms = {}
      this.imageUrl = '';


    },
    handleAvatarSuccess(res) {

      this.imageUrl = servicePath + res;
      this.img = res

    },
    PutInStorage() {
      let param = new URLSearchParams()
      param.append('SupplierName', this.supplier)

      if (this.supplier != null && '' != this.supplier) {
        if (this.goodsList != null) {
          axios.post("/api/shopping/putInStorage", param).then(res => {
            this.query();
          })
        } else {
          ElMessage({
            message: '未添加商品',
            type: 'success'
          })
        }

      } else {
        ElMessage({
          message: '请选择供应商',
          type: 'success'
        })
      }


    },
    query() {
      axios.post("/api/shopping/selectAll", null).then(res => {

        this.goodsList = res.data


      })
    }
  }
}
</script>

<style scoped>

</style>